<template>
  <div class="flex-row" style="width: 100%;height: 100%;justify-content: space-between;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: rgba(221, 222, 224, 0.3);
padding-top: 10px;">
    <div style="flex: 1;height: 100%;margin-right: 10px;padding: 0 0 0 10px;"
         class="flex-row-column">
      <div style="width: 100%;height: 55%;background: #fff;margin-bottom: 10px;padding: 10px;box-sizing: border-box">
        <tip-title title="列表配置" icon-name="icon-biaoge"></tip-title>
        <div style="width: 100%;display: flex;justify-content: flex-end;margin-bottom: 10px">
          <el-button type="primary" size="mini">预览表格</el-button>
          <el-button type="primary" size="mini" @click="addTableColumnSetting('',0)">添加配置</el-button>
        </div>
        <el-table
          :data="setTableData"
          height="calc(100% - 70px)"
          border
          style="width: 100%;height: calc(100% - 70px)">
          <el-table-column
            prop="sort"
            label="排序"
            align="center"
            width="80px"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="prevTableColumn(scope)"
                         :disabled="!scope.$index"><i class="el-icon-top" style="font-size: 18px"></i></el-button>
              <el-button :disabled="scope.$index == setTableData.length - 1" type="text" @click="nextTableColumn(scope)"><i class="el-icon-bottom" style="font-size: 18px"></i></el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="columnName"
            label="列名"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="field"
            label="字段"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="customizeColumnName"
            label="自定义列名"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="alignment"
            label="对齐方式"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="columnWidth"
            label="宽度"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="handle"
            label="操作"
            align="center"
            width="150px"
          >
            <template slot-scope="scope">
              <el-button type="text" link @click.stop="addTableColumnSetting(scope,1)">编辑</el-button>
              <el-button type="text" link @click.stop="delTableColumn(scope)">删除</el-button>
              <el-button type="text" link @click.stop="addSearchTableColumn(scope)"
                         :disabled="setSearchTableData.findIndex(item => scope.row.columnName == item.columnName) != -1">搜索</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="width: 100%;flex:1;background: #fff;padding: 10px;box-sizing: border-box">
        <tip-title title="搜索配置" icon-name="icon-chaxun"></tip-title>
        <el-table
          :data="setSearchTableData"
          height="calc(100% - 50px)"
          border
          style="width: 100%;height: calc(100% - 50px)">
          <el-table-column
            prop="columnName"
            label="列名"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="field"
            label="字段"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="customizeColumnName"
            label="自定义列名"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="field"
            label="查询方式"
            align="center"
          >
            <template slot-scope="scope">
              <el-select placeholder="请选择查询方式" clearable v-model="scope.row.inquiryMode">
                <el-option label="模糊查询" value="模糊查询"></el-option>
                <el-option label="精准查询" value="精准查询"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="field"
            label="搜索模式"
            align="center"
          >
            <template slot-scope="scope">
              <el-select placeholder="请选择搜索模式" clearable v-model="scope.row.searchMode"
                         @change="scope.row.relevancyDict = ''">
                <el-option label="输入框" value="输入框"></el-option>
                <el-option label="选择框" value="选择框"></el-option>
                <el-option label="日期查询" value="日期查询"></el-option>
                <el-option label="日期时间查询" value="日期时间查询"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="field"
            label="关联字典"
            align="center"
          >
            <template slot-scope="scope">
              <el-select placeholder="请选择关联的字典" clearable v-model="scope.row.relevancyDict"
                         :disabled="scope.row.searchMode != '选择框'" filterable>
                <el-option v-for="item in typeList" :key="item.id" :label="item.dictName" :value="item.dictType"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="handle"
            label="操作"
            align="center"
            width="150px"
          >
            <template slot-scope="scope">
              <el-button type="text" link @click.stop="delSearchTableColumn(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--    侧边栏-->
    <div style="width: 450px;height: 100%;background: #fff;padding: 10px;box-sizing: border-box">
      <el-tabs v-model="activeName" :stretch="true">
        <el-tab-pane label="列表字段" name="列表字段"></el-tab-pane>
        <el-tab-pane label="列表配置" name="列表配置"></el-tab-pane>
      </el-tabs>

      <RightTableColumn v-if="activeName == '列表字段'" :originalTableData="yuanSetTableData"
                        @throwSelectRightTable="getSelectTable"></RightTableColumn>
      <TableSetting v-if="activeName == '列表配置'" ref="refTableSetting"
                    :rightTableSettingObj="rightTableSetting"></TableSetting>
    </div>




    <el-dialog-comp title="添加表格配置" width="30%" :hasFooter="true" :appendToBody="true"
                    ref="refTableDialog" @throwDialogEmit="saveTableColumn" v-loading="formLoading" element-loading-text="数据表加载中...">
      <el-form :model="tableColumnForm" :rules="tableColumnFormRules" label-width="100px" label-position="right"
               ref="refColumnForm">
        <el-form-item label="表名称" prop="tableName" style="width: 100%">
          <el-select placeholder="请选择表名称" clearable style="width: 100%"
                     filterable @change="changeSlaveTable" v-model="tableColumnForm.tableName">
            <el-option v-for="item in querySurfaceData" :key="item.slaveTable" :label="item.slaveTable" :value="item.slaveTable"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="列名" prop="columnName" style="width: 100%">
          <el-select placeholder="请选择列名" v-model="tableColumnForm.columnName" clearable
                     filterable @change="changeColumnName" style="width: 100%">
            <el-option v-for="item in selectDataList" :key="item.id"
                       :label="item.columnComment" :value="item.columnComment"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段" prop="field">
          <el-input placeholder="请输入字段名称" v-model.trim="tableColumnForm.field" clearable
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="自定义列名" prop="customizeColumnName">
          <el-input placeholder="请输入自定义列名" v-model.trim="tableColumnForm.customizeColumnName" clearable></el-input>
        </el-form-item>
<!--        <el-form-item label="代码展现方式">-->
<!--          <el-button type="primary" @click="openCode">设计代码</el-button>-->
<!--        </el-form-item>-->
        <el-form-item label="对齐方式" prop="alignment">
          <el-select placeholder="请选择对齐方式" v-model="tableColumnForm.alignment" clearable
                     style="width: 100%">
            <el-option label="左对齐" value="left"></el-option>
            <el-option label="居中" value="center"></el-option>
            <el-option label="右对齐" value="right"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宽度" prop="columnWidth">
          <div style="width: 100%" class="flex-row">
            <el-slider v-model="tableColumnForm.columnWidth" style="width: 80%;margin-right: 10px"
                       :min="0" :max="2000" @change="widthNumber = tableColumnForm.columnWidth"></el-slider>
            <div style="flex: 1">
              <el-input v-model="widthNumber" @blur="blurSetColumnWidth"></el-input>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog-comp>



    <el-dialog-comp title="行内代码设计" width="40%" :hasFooter="true" :appendToBody="true"
                    ref="refRowDialog" @throwDialogEmit="saveRowCode">
      <div style="width: 100%;height: 500px">
        <CodeEditor @change="codeChange" v-model="code" language="javascript"></CodeEditor>
      </div>
    </el-dialog-comp>
  </div>
</template>

<script>
import CodeEditor from "@/components/CodeEditor";
import RightTableColumn from "@/views/systeamSet/moduleManage/components/RightTableColumn";
import TableSetting from "@/views/systeamSet/moduleManage/components/TableSetting";
import {listType} from "@/api/system/dict/type";
import {getSurfaceList, inquireData, viewTable} from '@/api/public/index'
let rowCode = ''
export default {
  name: "SetTableColumn",
  components:{
    RightTableColumn,
    TableSetting,
    CodeEditor
  },
  props:{
    tableName:{
      type:String,
      default:''
    },
    tableId:{
      type:String,
      default:''
    }
  },
  created() {
    listType({}).then(response => {
        this.typeList = response.rows;
      }
    );
    viewTable(this.$props.tableId).then(res => {
      this.setTableId = res.data.id
      const object = JSON.parse(res.data.tableSettingJson)
      this.yuanSetTableData = object.yuanSetTableData
      this.setTableData = object.yuanSetTableData
      this.setSearchTableData = object.setSearchTableData
      this.rightTableSetting = object.rightTableSetting
    })


    const params = {
      tableName:this.$props.tableName,
      tableId:this.$props.tableId,
    }
    getSurfaceList(params).then(res => {
      if(res.code == 200){
        res.data.records[0].slaveTable = res.data.records[0].mainTable
        this.querySurfaceData = res.data.records
      }
      else{
        this.querySurfaceData = []
      }
    })

  },
  data(){
    return {
      code:'',
      setTableId:'',
      querySurfaceData:[],//从表
      typeList:[],
      yuanSetTableData:[],
      setTableData:[],
      setSearchTableData:[],
      tableColumnForm:{
        columnName:'',
        field:'',
        customizeColumnName:'',
        alignment:'',
        columnWidth:100,
        tableName:'',
        tableRowCode:'',
      },
      tableColumnFormRules:{
        tableName:[{required:true,message:"请选择表名称",trigger:'change'}],
        columnName:[{required:true,message:"请选择列名",trigger:'change'}],
        alignment:[{required:true,message:"请填写对齐方式",trigger:'change'}],
      },
      widthNumber:'',
      tableColumnType:0,// 0新增 1编辑 2详情
      tableColumnIndex:0,
      selectDataList:[],
      activeName:'列表字段',
      rightTableSetting:{},
      surfaceList:[],//从表字段表
      formLoading:false,
    }
  },
  methods:{
    addTableColumnSetting(item,type){
      if(item && type == 2){
        Object.assign(this.tableColumnForm,{
          ...item.row,
          tableName:item.row.hasOwnProperty('tableName') ? item.row.tableName : '',
        })
      }
      else if(item && type == 1){
        console.log(item,'item')
        Object.assign(this.tableColumnForm,{
          ...item.row,
          tableName:item.row.hasOwnProperty('tableName') ? item.row.tableName : '',
        })
        this.tableColumnIndex = item.$index
      }
      else{
        this.tableColumnForm = {
          columnName:'',
          field:'',
          alignment:'',
          tableName:'',//从表字段
          columnWidth:100,
        }
      }
      this.tableColumnType = type
      this.widthNumber = this.tableColumnForm.columnWidth
      this.$refs.refTableDialog.throwOpenDialog()
      this.$nextTick(()=>{
        this.$refs.refColumnForm.clearValidate()
        this.$forceUpdate()
      })
    },
    //保存列
    saveTableColumn(){
      this.$refs.refColumnForm.validate(bol => {
        if(bol){
          if(!this.tableColumnType){
            if(!this.yuanSetTableData.length){
              this.yuanSetTableData.splice(0,0,{
                ...this.tableColumnForm,
                showColumn:true
              })
            }
            else{
              this.yuanSetTableData.push({...this.tableColumnForm, showColumn:true})
              this.$forceUpdate()
            }
          }
          else{
            this.yuanSetTableData.splice(this.tableColumnIndex,1,{
              ...this.tableColumnForm,
              showColumn:true
            })
          }
          this.setTableData = this.yuanSetTableData
          this.$refs.refColumnForm.resetFields()
          this.$refs.refTableDialog.closeDialog()


          console.log(this.yuanSetTableData,'this.yuanSetTableData')
        }
      })
    },
    blurSetColumnWidth(){
      this.tableColumnForm.columnWidth = this.widthNumber * 1
    },
    delSearchTableColumn(scope){
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setSearchTableData.splice(scope.$index, 1)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    },
    delTableColumn(scope) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.yuanSetTableData.splice(scope.$index, 1)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.setTableData = this.yuanSetTableData
      })
    },
    prevTableColumn(scope){
      const obj1 = {
        ...this.yuanSetTableData[scope.$index - 1]
      }
      const obj2 = {
        ...this.yuanSetTableData[scope.$index]
      }
      this.yuanSetTableData.splice(scope.$index - 1,1,obj2)
      this.yuanSetTableData.splice(scope.$index,1,obj1)

      this.setTableData = this.yuanSetTableData
    },
    nextTableColumn(scope){
      const obj1 = {
        ...this.yuanSetTableData[scope.$index + 1]
      }
      const obj2 = {
        ...this.yuanSetTableData[scope.$index]
      }
      this.yuanSetTableData.splice(scope.$index + 1,1,obj2)
      this.yuanSetTableData.splice(scope.$index,1,obj1)

      this.setTableData = this.yuanSetTableData
    },
    changeColumnName(value){
      const obj = this.selectDataList.find(item => item.columnComment == value)
      if(obj){
        this.tableColumnForm.field = obj.columnName
      }
      else{
        this.tableColumnForm.field = ''
      }

    },
    //选中
    getSelectTable(row){
      const ind = this.yuanSetTableData.findIndex(item => item.columnName == row.columnName)
      if(ind != -1){
        if(row.showColumn){
          this.yuanSetTableData[ind].showColumn = true
        }
        else{
          this.yuanSetTableData[ind].showColumn = false
        }
      }
      this.setTableData = this.yuanSetTableData.filter(item => item.showColumn != false)
    },

    addSearchTableColumn(scope){
      this.setSearchTableData.push({
        ...scope.row,
        inquiryMode:'', //查询方式
        searchMode:'',//搜索模式
        relevancyDict:'',
      })
      this.$forceUpdate()
    },
    throwData(){
      return {
        setTableId:this.setTableId,
        rightTableSetting:this.$refs.refTableSetting ? this.$refs.refTableSetting.throwData() : {},
        setSearchTableData:this.setSearchTableData,
        yuanSetTableData:this.yuanSetTableData
      }
    },
    changeSlaveTable(value){
      if(!value) return this.surfaceList = []
      this.formLoading = true
      inquireData({tableName:value}).then(res => {
        if(res.code == 200){
          this.formLoading = false
          this.selectDataList = res.data.filter(result => (result.columnName != 'id' && result.columnName != "del_flag"))
        }
        else{
          this.formLoading = false
          this.selectDataList = []
        }
      }).catch(()=>{
        this.formLoading = false
        this.selectDataList = []
      })
    },
    openCode(){
      this.code = this.tableColumnForm.tableRowCode
      console.log(this.code,'this.code')
      this.$refs.refRowDialog.throwOpenDialog()
    },
    codeChange(e){
      rowCode = e
    },
    saveRowCode(){
      this.tableColumnForm.tableRowCode = rowCode
      this.code = ''
      this.$refs.refRowDialog.closeDialog()
    }
  }
}
</script>

<style scoped>

</style>
